<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计时器</title>
    <script src="./jquery.js"></script>
    <script src="./index.js"></script>
    <style>
        html,body{
            width:100%
        }
        *{
            margin: 0;
            padding: 0;
        }
        /* 容器样式 */
        .container{
            width: 100%;
            height: 625px;
            background:url(./images/body.gif) repeat-x;
            /* background-size: 100% 100%; */
            position: relative;
        }
        /* 计时器部分 */
        .content{
            width: 400px;
            height: 400px;
            background:url(./images/bg.png) no-repeat;
            background-size:100% 100%;
            margin: 0 auto;
            overflow: hidden;
            font-size: 16px;
            color: white;
        }
        /* 脚注 */
        .foot{
            height: 30px;
            width: 100%;
            background-color: cornflowerblue;
            position: absolute;
            left: 0px;
            top: 595px;
            text-align: center;
            line-height: 30px;
        }
        /* 脚注内容样式 */
        .foot span{
            margin: 0 10px;
        }
        /* 标题 */
        .title{
            width: 130px;
            height: 40px;
            /* background-color:cyan; */
            margin: 30px auto 10px;
            font-size: 25px;
            line-height: 40px;
        }
        /* 输入的目标时间 */
        .target_time{
            text-align: center;
        }
        /* 输入的目标时间 输入框 */
        .target_time input{
            width: 50px;
            /* 去掉输入框输入时的边框  */
            outline: none;
        }
        /* 倒计时按钮 */
        div.count_btn{
            width: 120px;
            height: 120px;
            background:url(./images/btn_hover.jpg) no-repeat;
            background-size: 100% 100%;
            margin: 30px auto;
        }
        /* 剩余时间 */
        .residue_time{
            text-align: center;
            margin: 10px;
        }
        .residue_time span:nth-child(odd){
            color: yellow;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <!-- 容器 -->
    <div class="container">
        <!-- 计时器部分 -->
        <div class="content">
            <!-- 标题 -->
            <div class="title">开始倒计时</div>
            <!-- 输入的目标时间 -->
            <div class="target_time">
                <span class="pleaseEnter">请输入：</span>
                <input type="text" class="inTime" id="yearTarget">
                <span class="spanYear">年</span>
                <input type="text" class="inTime" id="monthTarget">
                <span class="spanMonth">月</span>
                <input type="text" class="inTime" name="" id="dayTarget">
                <span class="spanDay">日</span>
            </div>
            <!-- 倒计时按钮 -->
            <div class="count_btn" id="count_btn"></div>
            <!-- 提示距离目标时间剩余的天数 -->
            <div class="tip_time">
                <span class="tip_info">现在距离—</span>
                <span type="text" class="yearTip"  id="yearTip"></span>
                <span class="spanYear">年</span>
                <span type="text" class="monthTip" id="monthTip"></span>
                <span class="spanMonth">月</span>
                <span type="text" class="dayTip" id="dayTip"></span>
                <span class="spanDay">日</span>
                <span class="tip_info_foot">—还剩：</span>
            </div>
            <!-- 剩余时间 -->
            <div class="residue_time">
                <span class="residue_day" id="residue_day">0000</span>
                <span class="residue_day_span">天</span>
                <span class="residue_hours" id="residue_hours">00</span>
                <span class="residue_hours_span">小时</span>
                <span class="residue_minutes" id="residue_minutes">00</span>
                <span class="residue_minutes_span">分</span>
                <span class="residue_seconds" id="residue_seconds">00</span>
                <span class="residue_seconds_span">秒</span>
            </div>
        </div>
        <!-- 脚注 -->
        <!-- <div class="foot">
            <span>周玉柱</span>
            <span>201809601058</span>
            <span>软件Q181</span>
        </div> -->
    </div>
</body>
</html>